<template>
	<view>
		<view class="cztop">
			<view class="f32 fwb mb10">
				{{$t("cz.tit1")}}
			</view>
			<view class="f24" v-html="t('cz.txt1')"></view>
		</view>
		<view class="mbox">
			<view class="f32 fwb mb20">
				{{$t("cz.tit2")}}
			</view>
			<view class="mbox-inp bj_between mb20">
				<view class="mbox-inp-dw cy">
					{{$t("menu.$")}}
				</view>
				<input type="number" v-model="inp" @input="inpm" />
				<image src="/static/page3/i1.png" class="mbox-inp-ico" mode="widthFix"></image>
			</view>
			<view class="mb30">
				<text class="ca2 f24" style="margin-right: 30rpx;">{{$t("cz.tit3")}}</text>
				<text class="cy f32 fwb">+{{$t("menu.$")}} {{m}}</text>
			</view>
			<view class="f32 fwb mb30">
				Peso Recargar
			</view>
			<view class="mb30 clearfloat">
				<view class="mbox-item bj_center" style="font-size: 26rpx;" @click="chtd(item)"
					:class="item.ch ? 'mbox-itemch' : ''" v-for="item in td">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="clearfloat">
				<view class="mbox-item bj_center" :class="item.ch ? 'mbox-itemch' : ''" v-for="item in mlist"
					@click="chm(item)">
					<text>{{$t("menu.$")}} {{item.amount}}</text>
					<view class="mbox-item-tagb bj_center" v-if="ifch && item.jc > 100">
						+{{item.jc}}%
					</view>
				</view>
			</view>
		</view>
		<view class="bj_left mb40">
			<view class="xzbox" @click="chb">
				<view class="xzbox-ch bj_center" v-if="ifch">
					<image src="/static/page3/g.png"></image>
				</view>
			</view>
			<view class="f24 fwb">
				{{$t("cz.rt")}}
			</view>
		</view>
		<view class="czbtn mb20" @click="tocz">
			{{$t("cz.btn1")}}
		</view>
		<view class="tc f24" @click="opgc">
			{{$t("cz.btn2")}}
		</view>


		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	const {
		t
	} = useI18n()
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';

	const opgc = inject("opgc");

	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let loading = ref(false)

	let inp = ref("0")
	let m = ref("0.00")
	let ifch = ref(true)

	let nowitem = ref({})

	let mlist = ref([])

	let jm = ref(0)

	let td = ref([])
	let nowtdid = ref("")

	onShow(function() {
		td.value = []
		let tlist = getApp().globalData.recharge.payment_list
		for (var i = 0; i < tlist.length; i++) {
			let item = tlist[i]
			item.ch = i == 0 ? true : false
			td.value.push(item)
		}
		let list = getApp().globalData.recharge.recharge_amount_list
		mlist.value = []
		for (var i = 0; i < list.length; i++) {
			let item = list[i]
			item.jc = item.rate == 0 ? 100 : item.rate
			item.ch = false
			if (i == 0) {
				nowtdid.value = item.id
			}
			mlist.value.push(item)
		}
		chm(mlist.value[0])
	})

	function chm(json) {
		for (var i = 0; i < mlist.value.length; i++) {
			mlist.value[i].ch = false
		}
		json.ch = true

		jm.value = Number(json.amount)

		if (ifch.value) {
			m.value = Number(jm.value * (json.jc / 100)).toFixed(2)
		} else {
			m.value = Number(json.amount).toFixed(2)
		}
		inp.value = m.value
		nowitem.value = json
	}

	function chb() {
		if (ifch.value) {
			ifch.value = false
		} else {
			ifch.value = true
		}
		chm(nowitem.value)
	}

	function chtd(item) {
		for (var i = 0; i < td.value.length; i++) {
			td.value[i].ch = false
		}
		item.ch = true
		nowtdid.value = item.id
	}

	function inpm(e) {
		inp.value = e.detail.value.replace(/[^\d]/g, '');
	}

	// 充值
	function tocz() {
		loading.value = true
		common.recharge({
			// payment_id: getApp().globalData.recharge.default_payment_id,
			payment_id: nowtdid.value,
			money: jm.value
		}).then(res => {
			if (res.data.success) {
				getApp().globalData.orderid = res.data.data.orderid
				getApp().globalData.money = res.data.data.money
				// common.Purchase();
				window.open(res.data.data.url)
			} else {
				messageText.value = "message"
				msgType.value = "error";
				message.value.open();
			}
			loading.value = false
		})
	}
</script>

<style scoped lang="scss">
	/* PC端适配 */
	@media (min-width: 768px) {
		.czgc {
			// left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}



	.cztop {
		background: url("/static/page3/cb.png") no-repeat center center;
		background-size: 100% 100%;
		height: 152rpx;
		padding: 20rpx 0 0 26rpx;
		margin-bottom: 20rpx;
	}

	.mbox {
		background: linear-gradient(180deg, #007628 0%, #177747 100%);
		border-radius: 20rpx;
		padding: 28rpx;
		margin-bottom: 34rpx;

		&-item {
			position: relative;
			float: left;
			width: 200rpx;
			height: 76rpx;
			background: #003311;
			border-radius: 100rpx;
			font-size: 32rpx;
			margin-right: 18rpx;
			margin-bottom: 32rpx;

			&-tagb {
				position: absolute;
				width: 104rpx;
				height: 44rpx;
				background: #2AA22E;
				border-radius: 20rpx 30rpx 30rpx 0rpx;
				top: -28rpx;
				right: -20rpx;
				font-size: 24rpx;
			}
		}

		&-item:last-child {
			margin-right: 0;
		}

		&-itemch {
			background: linear-gradient(360deg, #009E35 0%, #10E658 100%);
		}

		&-inp {
			height: 88rpx;
			background: #003311;
			border-radius: 12rpx;
			border: 2rpx solid #177846;
			padding: 0 20rpx;

			&-dw {
				padding-right: 18rpx;
				border-right: 2rpx solid #0569C4;
				margin-right: 30rpx;
				font-size: 36rpx;
			}

			input {
				font-size: 36rpx;
				font-weight: bold;
			}

			&-ico {
				width: 120rpx;
			}
		}
	}

	.xzbox {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100%;
		border: 2rpx solid #fff;
		position: relative;
		margin-right: 24rpx;

		&-ch {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.czbtn {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(180deg, #00802B 0%, #06C045 100%);
		border-radius: 12rpx;
	}
</style>